<template>
  <div>
    <el-card>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="16">用户管理</el-col>
        <el-col :span="8" style="display:flex;justify-content: flex-end;">
          <el-button type="text" size="small" @click="addData(0)">新建</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="" style="margin-top:10px;">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="8" style="display:flex;align-items: center;">
          <div style="width:100px;">用户名：</div>
          <el-input
            placeholder="请输入用户名"
            size="small"
            class="input-with-select"
            clearable
            v-model.trim="queryParam.username"
          >
          </el-input>
        </el-col>
        <el-col :span="8" style="display:flex;justify-content: flex-end;">
          <el-button type="primary" icon="el-icon-refresh-right" size="small" @click="resetPageForm">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList(1)">查询</el-button>
          <el-button type="primary" icon="el-icon-delete" size="small" @click="batchRemove()">删除</el-button>
        </el-col>
      </el-row>
      <!-- 数据 -->
      <el-table 
       class="expandTable"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%;margin-top: 20px;"
        :row-key="getRowKey"
        :default-sort = "{prop: 'rank'}"
        border
        @selection-change="handleSelectionChange"
        v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="username" label="用户名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip>
          <template slot-scope="scope">
            {{parseTime(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-breadcrumb separator="|">
            <el-breadcrumb-item v-has-permi="['portal:notice:view']">
                <span @click="checkDate(1,scope.row)">
                <el-link type="primary" class="el-icon-view" title="预览"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-has-permi="['portal:notice:edit']">
                <span @click="checkDate(2,scope.row)">
                <el-link type="primary" class="el-icon-edit" title="编辑"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item class="last-breadcrumb" v-has-permi="['portal:notice:delete']">
                <span @click="removeData(scope.row)">
                <el-link type="primary" class="el-icon-delete" title="删除"></el-link>
                 </span>
              </el-breadcrumb-item>
              <el-breadcrumb-item></el-breadcrumb-item>
            </el-breadcrumb>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParam.page"
      :page-size="queryParam.size"
      :page-sizes="[10, 20, 30, 40]"
      layout="total,sizes, prev, pager, next"
      :total="queryParam.total"
      style="display: flex;justify-content: flex-end;margin-top: 10px;">
      </el-pagination>
    </el-card>
    <el-dialog
      :title="isEdit==0 ?'创建用户': isEdit==1 ?'查看用户':'编辑用户'"
      :visible.sync="isVisible"
      width="70%"
      @close="closeD">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="normal">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="form.username" :disabled="isEdit == 1"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" :disabled="isEdit == 1"></el-input>
        </el-form-item>
         <el-form-item label="手机号" prop="phone">
          <el-input style="tel" v-model="form.phone" :disabled="isEdit == 1"></el-input>
        </el-form-item>
        <el-form-item v-if="isEdit != 1">
          <el-button type="primary" @click="onSubmit('form')">保存</el-button>
          <el-button @click="isVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
  </div>
</template>
<script>
import {list , create , update , remove} from '@/api/user.js'
export default {
  data() {
    return {
      loading:false,
      queryParam:{
        title:'',
        page:1,
        size:10,
        total:0,
      },
      tableData:[],
      isVisible:false,
      isEdit:0,
      chooseData:[], // 选中数据
      form:{

      },
      rules:{
        username: [{required: true, message: '请输入用户名', trigger: 'change'}],
        password: [{required: true, message: '请输入密码', trigger: 'change'}],
      }
    }
  },
  mounted(){
    this.getList()
  },
  computed:{
  },
  methods:{
    // 列表
    getList(){
      this.loading = true
      const that = this
      const data={
        title:this.queryParam.title,
        currPage:this.queryParam.page,
        pageSize:this.queryParam.size,
      }
      list(data).then(function(res){
        console.log(res)
        that.loading = false
        if(res.success){
          that.tableData = res.data
          that.queryParam.total = res.total
        }
      }).catch((error)=>{
        console.log(error)
        that.loading = false
      })
    },
    // 添加
    addData(type){
      this.isEdit = type
      this.isVisible = true
    },
    // 编辑or查看
    checkDate(type,row){
      this.isEdit = type
      this.isVisible = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    // 确定提交
    onSubmit(formName){
      const that = this
      this.$refs[formName].validate(valid => {
      if (valid) {
        const data=Object.assign(this.form)
        const username =  JSON.parse(localStorage.getItem('userInfo')).username
        if(this.isEdit == 0){
          data.create_by = username
          create(data).then(function(res){
            console.log(res)
            if(res.success){
              that.$message.success('新增成功')
              that.isVisible = false
              that.getList()
            }else{
              that.$message.error(res.message)
            }
          })
        }else if(this.isEdit == 2){
          data.update_by = username
          update(data).then(function(res){
            console.log(res)
            if(res.success){
              that.$message.success('修改成功')
              that.isVisible = false
              that.getList()
            }else{
              that.$message.error(res.message)
            }
          })
        }
      }else {
        console.log('error')
      }
      })
    },
    // 删除提交
    removeData(row){
      let data={
        _id:row._id
      }
      console.log('data',data)
      const that = this
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      .then(() => {
        that.loading = true
        remove(data).then(function(res){
          that.loading = false
          console.log(res)
          if(res.success){
            that.$message.success('删除成功')
            that.getList()
          }else{
            that.$message.error(res.message)
          }
        }).catch(() => {
          that.loading = false
        });
      }).catch(() => {
        });
    },
    // 批量删除提交
    batchRemove(){
      if(this.chooseData.length <=0){
        return this.$message.error('至少选择一项')
      }
      let ids=[]
      this.chooseData.forEach(item => {
        ids.push(item._id)
      });
      let data={
        ids:ids
      }
      console.log('data',data)
      const that = this
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      .then(() => {
        that.loading = true
        remove(data).then(function(res){
          that.loading = false
          console.log(res)
          if(res.success){
            that.$message.success('删除成功')
            that.getList()
          }else{
            that.$message.error(res.message)
          }
        }).catch(() => {
          that.loading = false
        });
      }).catch(() => {
        });
    },
    // 关闭弹窗
    closeD(){
      this.form = {}
    },
     //选择分页
    getRowKey(row) {
      return row.id;
    },
    // 重置
    resetPageForm(){
      this.queryParam.title = '';
      this.queryParam.author = '';
    },
    handleSelectionChange(val){
      console.log(val)
      this.chooseData = val
    },
    handleSizeChange(val){
      console.log(val)
      this.queryParam.size= val
      this.getList();
    },
    handleCurrentChange(val){
      console.log(val)
      this.queryParam.page= val
      this.getList();
    },
  },
}
</script>
<style scoped>

</style>
